import React, { useState } from 'react'
import { Tabs, InfiniteScroll } from 'antd-mobile'
import axios from 'axios'
import { CalendarOutline } from 'antd-mobile-icons'
import "./App.scss"

function App() {
  let [dataList, setDataList] = useState([])
  let [pageCode, setPageCode] = useState(1)

  // 定义一个函数
  const FetchList = async () => {
    const res = await axios.get('/api/room/list',{params:{pageCode}})
    console.log(res, '列表res')
    const newData = (res.data.data.list)
    setDataList([...dataList, ...newData])
    setPageCode(pageCode+1)
  }
  // useEffect(()=>{
  //   FetchList()
  // },[])
  return (
    <div>
      <h1 style={{textAlign:"center"}}>上海 / 北京 </h1>
      <p style={{display:'flex',justifyContent:"space-around"}}>
        <span>今天 </span>
        <span>周二 </span>
        <span>周三 </span>
        <span>周四 </span>
        <span>周五 </span>
        <span>周六 </span>
        <span>日历</span>
      </p>
      <p style={{display:'flex',justifyContent:"space-around"}}>
        <i>02.17</i>
        <i>02.18</i>
        <i>02.19</i>
        <i>02.20</i>
        <i>02.21</i>
        <i>02.22</i>
        <span><CalendarOutline /></span>
      </p>
      <Tabs>
        <Tabs.Tab title='直达' key='1'>
          <div className='pai'>
            {
              dataList && dataList.map((item, index) => <dl key={index}>
                <dt>
                  <img src={item.url} alt="" />
                </dt>
                <dd>
                  <p>名称:{item.name}</p>
                  <p>标题:{item.title}</p>
                  <p>价格:{item.price}</p>
                  <p>经纪人:{item.person}</p>
                  <p>风格:{item.level}</p>
                </dd>
              </dl>)
            }
          </div>
          <InfiniteScroll loadMore={FetchList} hasMore={true} />
        </Tabs.Tab>
        <Tabs.Tab title='机票' key='2'>
          机票
        </Tabs.Tab>
        <Tabs.Tab title='汽车票' key='3'>
          汽车票
        </Tabs.Tab>
        <Tabs.Tab title='中转' key='4'>
          中转
        </Tabs.Tab>
      </Tabs>

    </div>
  )
}

export default App
